<template>
  <view class="Box">
    <image :src="tableData.dishesImg" class="positionImg"></image>
    <view class="dishesBox">
      <view class="titleBox">
        <view class="name">
          {{ tableData.dishesName }}
        </view>
        <view class="priceBox">
          <view class="">
            ￥
          </view>
          <view class="price">
            {{ tableData.price }}
          </view>
          <view class="">
            /{{ tableData.specification }}
          </view>

        </view>
      </view>
      <view class="">
        <u-parse :content="tableData.dishesIntroduce"></u-parse>
      </view>
    </view>
    <view class="shopBox">
      <view class="title">
        店铺信息
      </view>
      <view class="shop">
        <image :src="shopData.shopImgList[0]" class="shopImg">
        </image>
        <view class="shopRight">
          <view class="shopName">
            <view class="name">
              {{ shopData.shopName }}
            </view>
            <view v-if="shopData.type == 1" class="shopType">餐饮</view>
            <view v-if="shopData.type == 2" class="shopType">住宿</view>
            <view v-if="shopData.type == 3" class="shopType">零售</view>
            <view v-if="shopData.type == 4" class="shopType">平台</view>
          </view>
          <view class="shopTag">
            <view v-for="(item,index) in shopData.tag" :key="index" class="">
              <view class="tagItem">
                {{ item }}
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <view class="otherBox">
      <view class="otherTitle">
        本店其他商品
      </view>
      <view class="commodityList">
        <view v-for="(item,index) in shopSundryList" :key="index" class="">
          <view class="commodityitem" @click="shopSundryListClick(item)">
            <image :src="item.dishesImg" class="commodityImg">
            </image>
            <view class="dishesName">
              {{ item.dishesName }}
            </view>
            <view class="moneybox">
              <view class="moneyText">
                价格:
              </view>
              <view class="moneyRight">
                <view class="">
                  ￥
                </view>
                <view class="price">
                  {{ item.price }}
                </view>
                <view class="specification">
                  /{{ item.specification }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="separateBox">

    </view>
    <view class="placeOrder" @click="placeOrderClick">
      <image class="placeOrderImg" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/PlaceOrder.png">
      </image>
      <view class="placeOrderText">
        下单购买
      </view>
    </view>
  </view>
</template>

<script>
import {
  querySundryInfo,
  queryShopDetails,
} from "@/api/challenge";

export default {
  data() {
    return {
      tableData: {},
      shopData: {},
      value: 1,
      sundryId: '',
      loadingTips: false,
      shopSundryList: []
    }
  },
  onLoad(data) {
    this.sundryId = data.id
    querySundryInfo(data.id).then(res => {
      // console.log('输出商品', res);
      this.tableData = res
      queryShopDetails({
        shopId: res.shopId,
      }).then(params => {
        // console.log('输出商铺', params)
        var idynamicTags = []
        params.tag.split(",").forEach((params, index) => {
          if (params != '') {
            idynamicTags.push(params)
          }
        })
        params.tag = idynamicTags
        params.shopSundryList.forEach(item => {
          if (item.id != this.sundryId) {
            this.shopSundryList.push(item)
          }
        })
        this.shopData = params
      })
    })
  },
  methods: {
    placeOrderClick() {
      uni.navigateTo({
        url: '/pages/popular_destination/shopProducts?id=' + this.sundryId
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
}

.positionImg {
  width: 100%;
}

.dishesBox {
  background-color: #fff;
  padding: 40rpx;

  .titleBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .name {
      font-weight: 800;
    }

    .priceBox {
      display: flex;
      align-items: baseline;
      color: #ff0000;

      .price {
        font-size: 36rpx;
        font-weight: 800;
      }
    }
  }
}

.shopBox {
  margin: 20rpx 0;
  padding: 40rpx;
  background-color: #fff;

  .title {
    font-weight: 800;
  }

  .shop {
    display: flex;
    padding-top: 20rpx;

    .shopImg {
      width: 110rpx;
      height: 110rpx;
      border-radius: 16rpx;
    }

    .shopRight {
      margin-left: 20rpx;

      .shopName {
        display: flex;

        .name {
          font-weight: 800;
        }

        .shopType {
          font-size: 24rpx;
          color: #ff9802;
          border: 2rpx solid #ff9802;
          border-radius: 22rpx;
          padding: 0 14rpx;
          line-height: 38rpx;
          margin-left: 10rpx;
        }
      }

      .shopTag {
        display: flex;
        margin-top: 20rpx;
        overflow: hidden;


        .tagItem {
          font-size: 24rpx;
          padding: 2rpx 8rpx;
          background: #cccccc;
          border-radius: 4px;
          color: #fff;
          margin-right: 12rpx;
          white-space: nowrap;
        }
      }
    }
  }
}

.otherBox {
  padding: 40rpx;
  font-weight: 800;
  background-color: #fff;
}

.commodityList {
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .commodityitem {
    width: 326rpx;
    height: 380rpx;
    border: 1px solid #dddddd;
    border-radius: 10px;
    margin-bottom: 20rpx;

    .commodityImg {
      width: 100%;
      height: 160rpx;
      border-radius: 20rpx 20rpx 0 0;
    }

    .dishesName {
      font-size: 28rpx;
      font-weight: 800;
      padding: 20rpx;
    }

    .moneybox {
      display: flex;
      align-items: flex-end;
      border-top: 2rpx solid #dddddd;
      padding: 26rpx 20rpx;

      .moneyText {
        font-size: 28rpx;
        color: #757575;
      }

      .moneyRight {
        display: flex;
        color: #ff0000;
        align-items: flex-end;

        .price {
          font-size: 48rpx;
          font-weight: 800;
        }

        .specification {
          font-weight: 800;
        }
      }
    }
  }
}

.separateBox {
  padding-bottom: 100rpx;
}

.placeOrder {
  width: 100%;
  height: 100rpx;
  background: #4186f5;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .placeOrderImg {
    width: 40rpx;
    height: 36rpx;
  }

  .placeOrderText {
    color: #fff;
    margin-left: 12rpx;
  }
}
</style>
